<template>
	<view>
		<view class="personalWrap publicBox">
			<view class="content">
				<!-- 头像 -->
				<view class="avatar contentText">
					<view class="name">头像</view>
					<view class="rightContent">
						<button class="avatar_wrapper" @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
							<view class="imageWrap">
								<image class="img" :src="userPersonal.avatar"></image>
							</view>
							<u-icon name="arrow-right" size="20" color="#cdcdcd"></u-icon>
						</button>
					</view>
				</view>
				<!-- 昵称 -->	
				<view class="contentText">
					<view class="name">昵称</view>
					<view class="rightContent">
						<input type="nickname" v-model="userPersonal.nickname" class="inputText" placeholder="请输入昵称"/>
					</view>
				</view>
				<!-- 手机号 -->
				<view class="contentText">
					<view class="name">手机号</view>
					<view class="rightContent">
						<input type="number" v-model="userPersonal.mobile" class="inputText" placeholder="请输入手机号"/>
					</view>
				</view>
				<!-- 性别 -->
				<view class="contentText">
					<view class="name">性别</view>
					<view class="rightContent">
						<radio-group @change="radioChange" class="checklist-box">
							<label class="checklist-item" v-for="(item, index) in userSex" :key="item.value">
								<radio :value="item.value" :checked="index === current" />
								<view>{{item.text}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 角色 -->
				<view class="contentText">
					<view class="name">角色</view>
					<view class="rightContent">
						<view class="value">{{userPersonal.customerType}}</view>
						<uni-icons type="right" size="20" color="#cdcdcd"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="handleWrap">
			<u-button customStyle="margin-top:20px;font-size:18px;"
			:loading="saveLoading"
			  size="large" color="#0AB99C" text="确定保存" @click="save">
			</u-button>
			<u-button customStyle="margin-top:20px;font-size:18px;" 
			  :loading="signOutLoading"
			  size="large" type="error" text="退出登录" @click="signOut">
			</u-button>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import { getUserProfileGet,updateProfilePost } from '@/config/api.js'
	import {IfEmpty,IfPhone} from '@/utils/ruleMessage.js'
	export default{
		data(){
			return{
				userPersonal:{
					avatar:'',
					customerType:'',
					mobile:'',
					gender:'',
					nickname:'',
				},
				userSex: [{
					text: '男',
					value: '0'
				}, {
					text: '女',
					value: '1'
				}],
				current:0,
				saveLoading:false,
				signOutLoading:false,
			}
		},
		computed:{
			...mapState('m_user',['userInfo','token'])
		},
		methods:{
			// 把m_user模块中的updateUserInfo,updateToken函数映射到当前组件中使用
			...mapMutations('m_user',['updateToken','updateUserInfo']),
			//头像
			onChooseAvatar(e){
				this.userPersonal.avatar=e.detail.avatarUrl
				this.ifUploadImage=true
			},
			//性别选择
			radioChange(e){
				this.userPersonal.gender=e.detail.value
				this.current=e.detail.value
			},
			signOut(){//退出登录
				let that=this
				this.signOutLoading=true
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success(res) {
						if (res.cancel) {
						  uni.$showMsg('您取消了退出登录操作！')
						}else{//确定
						    uni.$u.toast('退出登录成功','success',function(){
								uni.navigateBack({
									delta:1,
								})
								that.updateUserInfo({})//清空用户信息
								that.updateToken('')//清空token
							},1500)
						}
					}
				})
			},
			save(){//保存
			    if(IfEmpty(this.userPersonal.nickname,'昵称不能为空！')) return
				if(IfPhone(this.userPersonal.mobile)) return
				this.saveLoading=true
				if(this.ifUploadImage&&this.userPersonal.avatar!=this.userInfo.avatar){//修改了图片
					this.getUploadImage()
				}else{
					this.modifyContent()
				}
			},
			async modifyContent(param=this.userPersonal){//修改
				const res =await updateProfilePost(param)
				if(res.code=='0'){
					this.getUserInformation(true)
				}
			},
			setUserInfoText(userRes,ifUserTrue){
				if(ifUserTrue){
					this.updateUserInfo({
						avatar:userRes.data.avatar,
						userName:userRes.data.nickname,
						userId:userRes.data.id,
						parkId:1,
						sex:userRes.data.gender,
						customerType:userRes.data.customerType?userRes.data.customerType:'会员',//用户类型
						phone:userRes.data.mobile,
						customerId:userRes.data.customerId?userRes.data.customerId:''
					})
				}
				this.userPersonal={
					avatar:userRes.data.avatar,
					nickname:userRes.data.nickname,
					customerType:userRes.data.customerType?userRes.data.customerType:'会员',
					mobile:userRes.data.mobile,
					gender:userRes.data.gender,
				}
				this.current=Number(userRes.data.gender)
			},
			async getUserInformation(ifUserTrue=false){//渲染
				let userRes=await getUserProfileGet()
				if(userRes.code=='0'){
					this.setUserInfoText(userRes,ifUserTrue)
					if(ifUserTrue){
						uni.$u.toast('保存成功！','success',function(){
							uni.navigateBack({
								delta: 1,
							})
						})
					}
				}
			},
			getUploadImage(filePath=this.userPersonal.avatar){//图片上传 并提交 --randerImageList本地图片   提交参数param  basUrl路径
				var that=this
				uni.uploadFile({
					url:uni.$u.http.config.baseURL+'/system/mobile/upload',
					header: {
					    'Authorization': 'Bearer ' + that.token
					},
				    filePath: filePath,
				    name: 'file',
				    success (res){
						let Data=JSON.parse(res.data)
						if(Data.code=='0'){
							that.userPersonal.avatar=Data.url
							that.modifyContent()
						}else{
							if(Data.code=='403'||Data.code=='401'){
								uni.showModal({
									title: '提示',
									confirmText: "去登录", // 确认按钮的文字 
									showCancel:false,
									content: "登录过期，请重新登录",
									complete() {
										uni.$u.route('/subpkg/simplePage/simplePage', {
											title: '登录',
											IfonShow: 'true'
										});
									}
								})
							}else{
								uni.$u.toast(Data.msg)
							}
						}
				    }
				})
			},
		},
		created() {
			this.getUserInformation()
		}
	}
</script>

<style scoped lang="scss">
	.personalWrap{
		margin-top:15px !important;
		.content{
			padding:10px;
			.contentText{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				border-top:1px solid #f5f5f5;
				.name{
					width:80px;
				}
				.rightContent{
					display: flex;
					align-items: center;
					height:100%;
					.inputText{
						margin-right:5px;
						text-align: right;
					}
					// 性别
					.checklist-box{
						display: flex;
						height:100%;
						.checklist-item{
							display:flex;
							align-items: center;
							margin-left:25px;
						}
					}
				}
				// 头像
				&.avatar{
					height:65px;
					border-top:none !important;
					.avatar_wrapper{
						display:flex;
						padding:0 !important;
						background-color: #fff !important;
						&::after {
						   border: none;
						}
						.imageWrap{
							width:50px;
							height:50px;
							border-radius:50%;
							overflow: hidden;
							margin-right:5px;
							.img{
								height:100%;
								width:100%;
							}
						}
					}
					
				}
				
			}
		}
	}
	.handleWrap{//保存、退出登录
		width:600rpx;
		margin:0 auto;
	}
</style>